<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="container">
		<table border="2" cellpadding="2" align="center" width="400px">
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
			<tbody id="tbody">

			</tbody>
		</table>
	</div>
</body>

<script type="text/html" id="stu">
	{{each student as value}}
		<tr>
			<td>{{value.id}}</td>
			<td>{{value.name}}</td>
			<td>{{value.age}}</td>
			<td>{{value.gender}}</td>
		</tr>
	{{/each}}
</script>
<script type="text/javascript" src="template.js"></script>
<script type="text/javascript">
	window.onload = function(){
		var students = {
			student:[
				{id:"0001",name:"张三",age:"20",gender:"男"},
				{id:"0002",name:"李四",age:"21",gender:"女"},
				{id:"0003",name:"王五",age:"22",gender:"男"}
			]
		}

		var html = template("stu" , students);
		// console.log(html);
		var tbody = document.getElementById("tbody");
		tbody.innerHTML = html;

		/*使用字符串拼接的形式得到html标签字符串
		var tag = "";
		for(var i=0;i<students.student.length;i++){
			var stu = students.student[i];
			tag +="<tr><td>"+stu.id+"</td><td>"+stu.name+"</td><td>"+stu.age+"</td><td>"+stu.gender+"</td></tr>";
		}

		var tbody = document.getElementById("tbody");
		tbody.innerHTML = tag;
		*/


	}
</script>
</html>